<template>
    <div>
        <el-row>
            <el-col :xs="1" :sm="2" :md="3" :lg="3" :xl="3" class="forumCol">
                <div class="ep-bg-purple"/>
            </el-col>
            <el-col :xs="18" :sm="16" :md="15" :lg="13" :xl="13" class="forumCol">
                <div class="grid-content ep-bg-purple-light">
                    <el-form :inline="true" :model="queryParams" class="queryForm">
                        <el-form-item label="标题" class="queryTitle">
                            <el-input v-model="queryParams.title" placeholder="标题" clearable />
                        </el-form-item>
                        <el-form-item label="学院" class="queryCollege">
                            <!--.forumStudent <el-input v-model="queryParams.collegeId" placeholder="请输入学院" clearable /> -->
                            <el-select v-model="queryParams.schoolId" filterable placeholder="请选择学校">
                              <el-option
                                v-for="school in schoolList"
                                :key="school.id"
                                :label="school.name"
                                :value="school.id"
                              ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="submit">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                        <el-form-item class="reset">
                            <el-button type="primary" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="sort">
                        <span>排序方式：</span>
                        <el-dropdown trigger="click">
                          <span class="el-dropdown-link">
                            {{getSortName(queryParams.orderByColumn)}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                          </span>
                          <template #dropdown>
                            <el-dropdown-menu v-for="(sort) in sortList" :key="sort.key">
                              <el-dropdown-item @click="setSort(sort.key)">{{sort.value}}</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                    </div>
                    <PostList :isLocal="isLocalSchool"></PostList>
                    <!-- :postList="postList" @putPostDetail="getPostDetail" -->
                </div>
            </el-col>
            <el-col :xs="4" :sm="4" :md="3" :lg="5" :xl="5" class="forumCol">
                <div class="grid-content ep-bg-purple-light">
                    <el-card style="max-width: 480px;">
                        <template #header>
                            <div class="card-header" style="color: rgb(1, 126, 204) ;text-align: center;">
                                <span style="font-size: 25px;font-weight: 500;margin: 5px 0;">学校最新时事</span>
                            </div>
                        </template>
                        <div v-for="event in eventList" :key="event.id" class="">
                            <div style="cursor: pointer;display: flex;flex-direction: row;" @click="putEvent(event.id)">
                                <div style="">{{ parseTitle(event.title,6) }}</div>
                                <div style="flex-grow: 1;"></div>
                                <div style="font-size: 12px;line-height: 22px;">{{parseTitle(getSchoolNameForId(event.schoolId),6)}}|{{ parseTimeStringForPage(event.createTime) }}</div>
                            </div>
                            <el-divider v-if="event.id == eventList[eventList.length-1].id?false:true" style="margin: 2px 0;"/>
                            <!-- <div style="cursor: pointer;" @click="centerDialogVisible = true">{{ event.title }}</div> -->
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="1" :sm="2" :md="3" :lg="3" :xl="3" class="forumCol">
                <div class="ep-bg-purple-light"/>
            </el-col>
        </el-row> 
        <el-dialog class="centerDialogVisible" v-model="centerDialogVisible" :title="showEvent.title" width="500" destroy-on-close center>
            <div style="" v-html="showEvent.content">
            </div>
            <p style="display: flex;flex-direction: row-reverse;">发布学校:{{ getSchoolNameForId(showEvent.schoolId) }}</p>
            <p style="display: flex;flex-direction: row-reverse;">发布时间:{{ parseTimeString(showEvent.createTime) }}</p>
        </el-dialog>
    </div>
</template>

<script>
import PostList from "@/components/PostList"
// import {listPost} from "@/api/forum/post"
import usePostStore from "@/store/forum/post"
import {listCollege} from "@/api/forum/college"
import useUserStore from "@/store/modules/user"
import useBaseStore from "@/store/forum/base"
import { parseTime } from '@/utils/ruoyi'
import useEventStore from "@/store/forum/event"

export default {
    name: 'forumPage',
    data(){ 
        return {
            postList:[],
            // handleQuery: true,  //是否显示搜索框
            collegeList: [],
            isLocalSchool: false,
            centerDialogVisible: false,
            changeEventId: null,
            showEvent: {},
        };
    },
    components:{
        PostList
    },
    computed:{
        schoolId(){
            return useUserStore().schoolId;
        },
        collegeId(){
            return useUserStore().collegeId;
        },
        queryParams(){
            return usePostStore().queryParams;
        },
        sortList(){
            return usePostStore().sortList;
        },
        schoolList(){
            return useBaseStore().schoolList;
        },
        eventList() {
            return useEventStore().eventList;
        }
    },
    created(){
        usePostStore().changeTab = '2';
        this.resetQuery();
        this.getPostList();
        this.getColleges();
        useEventStore().getEventList();
    },
    methods:{
        getSchoolNameForId(schoolId){
            return useBaseStore().getSchoolForId(schoolId).name;
        },
        parseTitle(title,length){
            var result = '';
            if(title.length>length){
                result = title.substring(0,length)+'...'; 
            }else{
                result = title;
            }
            return result;
        },
        parseTimeString(date) {
            return parseTime(new Date(date),"{y}-{m}-{d}");
        },
        parseTimeStringForPage(date) {
            return parseTime(new Date(date),"{m}-{d}");
        },
        putEvent(id) {
            this.changeEventId = id;
            for (var i = 0; i < this.eventList.length; i++) {
                if (this.eventList[i].id == id) {
                    this.showEvent = this.eventList[i];
                }
            }
            this.centerDialogVisible = true;
        },
        setSort(key){
            usePostStore().setSort(key);
        },
        getSortName(key){
            console.log("排序方式：",key)
            return usePostStore().getSortValueForKey(key);
        },
        getPostList(){
            usePostStore().getPostList();
        },
        getColleges(){
            var query = {
                schoolId: useUserStore().schoolId
            }
            listCollege(query).then((res)=>{
                this.collegeList = res.rows;
            })
        },
        handleQuery(){
            this.getPostList();
        },
        resetQuery(){
            usePostStore().resetQueryForAll();
        },
        onSubmit(){
            this.getPostList();
        }
    }
}

</script>

<style lang="scss">
.centerDialogVisible{
    img{
        width: 400px;
    }
}
</style>
<style scoped lang="scss">
.sort{
    font-size: 14.5px;
    margin: 0 0 0 25px;
}
.queryForm {
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .queryTitle{
        margin: 25px 20px 15px 20px ;
        width: 30%;
        flex-grow: 2;
    }
    .queryCollege{
        margin: 25px 20px 15px 20px ;
        width: 30%;
        flex-grow: 2;
    }
    .submit{
        margin: 25px 20px 15px 20px ;
        width: 10%;
        flex-grow: 1;
    }
    .reset{
        margin: 25px 20px 15px 20px ;
        width: 10%;
        flex-grow: 1;
    }
}
.forumCol {
//   border-radius: 4px;
}
.grid-content {
//   border-radius: 4px;
  min-height: 36px;
//  height: 500px;
//   border: 2px solid black;
  margin: 5px;
}
</style>